<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../../static/css/minireset.css" />
    <link rel="stylesheet" href="../../static/css/common.css" />
    <link rel="stylesheet" href="../../static/css/cart.css" />
  </head>
  <body>
  <div id="app">
    <div class="header">
      <div class="w">
        <div class="header-left">
          <a href="../../index.html">
            <img src="../../static/img/logo.gif" alt=""
          /></a>
          <h1>我的购物车</h1>
        </div>
        <div class="header-right">
          <h3>欢迎<span>张总</span>光临尚硅谷书城</h3>
          <div class="order"><a href="../order/order.html" >我的订单</a></div>
          <div class="destory"><a href="../../index.html">注销</a></div>
          <div class="gohome">
            <a href="../../index.html">返回</a>
          </div>
        </div>
      </div>
    </div>
    <div class="list">
      <div class="w">
        <table>
          <thead>
            <tr>
              <th>图片</th>
              <th>商品名称</th>

              <th>数量</th>
              <th>单价</th>
              <th>金额</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
          <tr v-for=" cartItem in cartItemList">
            <td>
              <img :src="cartItem.book.bookImg" alt="" />
            </td>
            <td>{{cartItem.book.bookName}}</td>
            <td>
              <span class="count" @click="editCartItem(cartItem.id,cartItem.buyCount-1)">-</span>
              <input class="count-num" type="text" :value="cartItem.buyCount" />
              <span class="count" @click="editCartItem(cartItem.id,cartItem.buyCount+1)">+</span>
            </td>
            <td>{{cartItem.cartItemMoney}}</td>
            <td>{{cartItem.book.price}}</td>
            <td><a href="">删除</a></td>
          </tr>




          </tbody>
        </table>
        <div class="footer">
          <div class="footer-left">
            <a href="#" class="clear-cart">清空购物车</a>
            <a href="#">继续购物</a>
          </div>
          <div class="footer-right">
            <div>共<span>{{totalCount}}</span>项商品</div>
            <div class="total-price">总金额<span>{{totalMoney}}</span>元</div>
            <a class="pay" href="checkout.html" @click="gotocheck">去结账</a>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="w">
        <div class="top">
          <ul>
            <li>
              <a href="">
                <img src="../../static/img/bottom1.png" alt="" />
                <span>大咖级讲师亲自授课</span>
              </a>
            </li>
            <li>
              <a href="">
                <img src="../../static/img/bottom.png" alt="" />
                <span>课程为学员成长持续赋能</span>
              </a>
            </li>
            <li>
              <a href="">
                <img src="../../static/img/bottom2.png" alt="" />
                <span>学员真是情况大公开</span>
              </a>
            </li>
          </ul>
        </div>
        <div class="content">
          <dl>
            <dt>关于尚硅谷</dt>
            <dd>教育理念</dd>
            <!-- <dd>名师团队</dd>
            <dd>学员心声</dd> -->
          </dl>
          <dl>
            <dt>资源下载</dt>
            <dd>视频下载</dd>
            <!-- <dd>资料下载</dd>
            <dd>工具下载</dd> -->
          </dl>
          <dl>
            <dt>加入我们</dt>
            <dd>招聘岗位</dd>
            <!-- <dd>岗位介绍</dd>
            <dd>招贤纳师</dd> -->
          </dl>
          <dl>
            <dt>联系我们 </dt>
            <dd>http://www.atguigu.com</dd>
            <dd></dd>
          </dl>
        </div>
      </div>
      <div class="down">
        尚硅谷书城.Copyright ©2015
      </div>


    </div>
  </div>
  </body>
  <script src="../../js/axios-0.18.0.js"></script>
  <script src="../../js/vue.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../../element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="../../element-ui/lib/index.js"></script>
<script>
  new Vue({
    el:"#app",
    data:{
      cart:{},
      cartItemList:[],
      totalCount:'',
      totalMoney:'',
    },
    methods: {
      gotocheck(){
          axios({
            method:'post',
            url:'http://localhost:8080/w9/cart/order/checkout'
          })
      },
      needUpdate() {
        axios({
          method: 'post',
          url: 'http://localhost:8080/w9/cart/getAllCartItem',
        }).then(res => {
          this.cartItemList = res.data

        })

        axios({
          method: 'get',
          url: 'http://localhost:8080/w9/cart/getTotal'
        }).then(res => {
          this.totalCount = res.data.totalCount
          this.totalMoney = res.data.totalMoney
          console.log(this.totalMoney)

        })

      },

      editCartItem(id,buyCount) {
        axios({
          method: 'get',
          url:'http://localhost:8080/w9/cart/editCartItem?id='+id+'&buyCount='+buyCount
        }).then(res=>{

        })
        this.needUpdate()
        console.log('222222')
      },

    } ,

    created(){


    },
    mounted(){
      this.needUpdate()
    }
  })
</script>
</html>
